<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <span class="secondtitle" v-show="isThisInf">员工信息查询</span>
          <span class="secondtitle" v-show="isComments">员工评价详情</span>
          <span class="secondtitle" v-show="isAddComments">员工评价录入</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <div style="display: block;width:inherit;height:inherit">
          <span  style="left: 200px;position: relative;color: mediumblue;font-size: 20px;" v-show="!isAddComments">
        <el-button icon="el-icon-search" type="primary" style="left: 200px;position: relative;">搜索</el-button>
          </span>
          <el-input type="search" v-model="search" placeholder="请输入信息" style="left: 110px;position: relative;width: 200px;" v-show="!isAddComments"></el-input>
          <el-button type="danger" v-show="isComments" @click="backPageInf" style="left:200px;position: relative">返回</el-button>
          <br><br>
          <!-- 表格 -->
          <el-table
            :data="tables"
            style="width: 800px;left: 200px"
            max-height=700
            v-loading="loading"
            v-show="isThisInf">

            <el-table-column label="员工id" prop="id" >
              <template v-slot="scope">
                <span class="col-cont" v-html="showDate(scope.row.id)" ></span>
              </template>
            </el-table-column>
            <el-table-column  label="姓名" prop="name">
              <template v-slot="scope">
                <span class="col-cont" v-html="showDate(scope.row.name)" ></span>
              </template>

            </el-table-column>
            <el-table-column  label="性别" prop="gender">
              <template v-slot="scope">
                <span class="col-cont" v-html="showDate(scope.row.gender)" ></span>
              </template>
            </el-table-column>
            <el-table-column  label="电话" prop="phone_number">
              <template v-slot="scope">
                <span class="col-cont" v-html="showDate(scope.row.phone_number)" ></span>
              </template>
            </el-table-column>
            <el-table-column  label="邮件" prop="email">
              <template v-slot="scope">
                <span class="col-cont" v-html="showDate(scope.row.email)" ></span>
              </template>
            </el-table-column>
            <el-table-column
                  fixed="right"
                  label="操作"
                  width="250px">
                <template #default="scope">
<!--                  <span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>-->
                  <el-button size="mini" type="primary"   @click="changeToComments(scope.row)" >评价详情</el-button>
<!--                  <span>&nbsp&nbsp&nbsp</span>-->
                  <el-button size="mini" type="success"  @click="changeToAddComments(scope.row)" >添加评价</el-button>

                </template>

<!--              <template slot-scope="scope">-->
<!--                <span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>-->
<!--                <el-button size="mini" type="primary"   @click="changeToComments(scope.row)" >评价详情</el-button>-->
<!--                <span>&nbsp&nbsp&nbsp</span>-->
<!--                <el-button size="mini" type="success"  @click="changeToAddComments(scope.row)" >添加评价</el-button>-->
<!--              </template>-->

            </el-table-column>
          </el-table>



          <el-table
            :data="infData"
            style="width: 800px;left: 200px;position: relative;"
            max-height=500
            v-loading="loading"
            v-show="isComments">

            <el-table-column label="姓名" prop="name" >
              <template v-slot="scope">
                <span class="col-cont" v-html="showDate(scope.row.name)" ></span>
              </template>
            </el-table-column>
            <el-table-column  label="奖惩" prop="symbol">
              <template v-slot="scope">
                <span class="col-cont" v-html="showDate(scope.row.symbol)" ></span>
              </template>

            </el-table-column >
            <el-table-column  label="详情">
              <template  #default="scope">
                <el-button type="primary" plain @click="showDetail(scope.row)" >详情</el-button>
              </template>

            </el-table-column>
            <el-table-column  label="时间" prop="time">
              <template v-slot="scope">
                <span class="col-cont" v-html="showDate(scope.row.time)" ></span>
              </template>
            </el-table-column>
            <el-table-column  label="公司名称" prop="company_name">
              <template v-slot="scope">
                <span class="col-cont" v-html="showDate(scope.row.company_name)" ></span>
              </template>
            </el-table-column>
            <el-table-column  label="评价人" prop="staff_name">
              <template v-slot="scope">
                <span class="col-cont" v-html="showDate(scope.row.staff_name)" ></span>
              </template>
            </el-table-column>
            <!--            <el-table-column  label="操作" width="200px">-->
            <!--              <span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>-->
            <!--              <el-button type="danger"  size="mini" @click="deleteComment">删除</el-button>-->
            <!--              <el-button type="warning"  size="mini" @click="changeComment">修改</el-button>-->
            <!--            </el-table-column>-->
          </el-table>


          <el-form
            ref="commentFrom"
            :rules="cm_rules"
            :model="commentFrom"
            label-width="80px"
            class="padding"
            v-show="isAddComments">
            <!--            <el-form-item label="员工编号" prop="worker_id">-->
            <!--              <el-input v-model="commentFrom.worker_id"></el-input>-->
            <!--            </el-form-item>-->

            <!--            <el-form-item label="编号" prop="staff_id">-->
            <!--              <el-input v-model="commentFrom.staff_id"></el-input>-->
            <!--            </el-form-item>-->

            <el-form-item label="奖惩" prop="symbol">
              <el-radio-group v-model="commentFrom.symbol" class="radio_s">
                <el-radio label="0">奖励</el-radio>
                <el-radio label="1">惩罚</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="详情" prop="detail">
              <el-input type="textarea" v-model="commentFrom.detail"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm" style="width: 150px">提交</el-button>
              <el-button type="warning">取消</el-button>
              <el-button type="danger" @click="backPageInf" v-show="isAddComments">返回</el-button>
            </el-form-item>
          </el-form>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {GetCompanyWorkers} from "../../../../service/past/employeeSearch";
import store from "../../../../store";
import axios from "axios";
import {pushWorkerComment} from "../../../../service/past/employeeComments";
export default {
  data(){
    return{
      isThisInf:true,
      isComments:false,
      isAddComments:false,
      loading:'',
      tableData:[],
      infData:[],
      search:'',
      saveSearch:'',
      commentFrom: {
        worker_id:'',
        staff_id:'',
        symbol: '1',
        detail: ''
      },
      cm_rules: {
        // worker_id: [
        //   {required: true, message: '请输入员工id', trigger: 'blur'}
        // ],
        staff_id: [
          { required: true, message: '请输入hrid', trigger: 'blur' }
        ],
        // company_id: [{required: true, message: '请输入公司id', trigger: 'blur'}],
        symbol: [
          { required: true, message: '请选择奖惩', trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '请输入详情', trigger: 'blur' }
        ]
      },
    }
  },
  mounted() {
    this.gettableData()
  },
  computed: {
    // 实时监听表格
    tables: function() {
      const search = this.search
      if (search) {
        return this.tableData.filter(dataNews => {
          return Object.keys(dataNews).some(key => {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.tableData
    }
  },
  methods: {
    // 筛选变色
    showDate(val) {
      val = val + '';
      if (val.indexOf(this.search) !== -1 && this.search !== '') {
        return val.replace(this.search, '<span style="color: red; ">' + this.search + '</span>')
      } else {
        return val
      }
    },
    gettableData() {
      // this.loading=true
      GetCompanyWorkers().then((res) => {
        this.tableData = res.data.worker
        this.loading = false
        console.log(this.tableData)
      }).catch(err => {
        return this.$message.error(err.message)
      })
    },
    changeToComments(value) {
      this.isComments=true
      this.loading = true
      this.isThisInf = false
      let worker_id = value.id
      axios.post('/Reward_Punishment/findByWorker_id', {worker_id}).then((res) => {
        this.infData = res.data.reward_punishments
        console.log(this.infData)
        for(let i=0;i<this.infData.length;i++){
          if (this.infData[i].symbol==1){
            this.infData[i].symbol='惩罚'
          }else {
            this.infData[i].symbol='奖励'
          }
        }
        this.loading = false
        this.saveSearch=this.search
        this.search=''
      }).catch(err => {
        return this.$message.error(err.message)
      })
    },
    backPageInf() {
      this.isThisInf = true
      this.isComments=false
      this.isAddComments=false
      this.commentFrom={brand_right:0}
      this.search=this.saveSearch
    },
    showDetail(value) {
      this.$alert(value.detail, '评价详情', {
        confirmButtonText: '确定',

      });
    },
    changeToAddComments(value) {
      this.worker_id=store.state.worker_id
      this.staff_id=value.id
      this.isThisInf=false
      this.isAddComments=true
      this.commentFrom.worker_id = value.id
    },
    submitForm() {
      let inf=localStorage.getItem('worker_id')
      inf = inf.replace("\"","").replace("\"","");
      this.commentFrom.staff_id=inf
      pushWorkerComment(this.commentFrom) .then((res)=>{
        console.log(JSON.stringify(res.data.msg))
        let check=JSON.stringify(res.data.msg)
        console.log(check)
        if (check.trim()==check.trim()){
          console.log('ok')
          this.commentFrom={brand_right:0}
          this.$message( {
            message: '添加成功',
            type: 'success'
          })
        }else {
          this.commentFrom={brand_right:0}
          this.$message( {
            message: '添加失败',
            type: 'danger'
          })
        }
      }).catch((err)=>{
        console.log(err)
        this.$message.error('添加失败，请联系管理员');
      })
    },
  }
}
</script>
<style>
th.el-table_1_column_6.is-leaf {
  text-align: center;
}
th.el-table_2_column_13.is-leaf{
  text-align: center;
}
.el-form-item__label{
  color: black;
  font-size: 14px;
}
</style>
